import { h, Component, render } from 'preact';
import { observer } from 'mobx-react';
import { map } from 'lodash-es';
import Behavior from './behavior/Behavior';
import Archor from './Archor';
import Rect from '../basic-shape/Rect';

export default class BaseNode extends Component {
  render() {
    return (
      <Behavior model={this.props.nodeModel} >
        <g
          onClick={this.handleClick}
        >
          {this.getShape()}

          {this.getArchors()}

          {this.getText()}
        </g>
      </Behavior>
    )
  }
  getAttributes() {
    const attributes = this.props.nodeModel;
    // 为了自定义
    return {
      fill: 'transparent',
      fillOpacity: 1,
      strokeWidth: '1px',
      stroke: '#000',
      strokeOpacity: 1,
      ...attributes
    };
  }
  getShape () {
    const { x, y, width, height, fill } = this.getAttributes();
    return <Rect
      {...{ x, y, height, width, fill }}
    />
  }
  handleClick = (e) => {
    this.props.nodeModel.fill = 'red';
  }
  getArchorsPosition() {
    return []
  }

  getArchors() {
    return map(this.getArchorsPosition(), xy =>
      <Archor {...xy} />
    );
  }

  getText() {

  }
}
